<template>
  <Header></Header>
  <DrawerTwo></DrawerTwo>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #2AB28B;">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/pageList/'+ids }">数据分析</el-breadcrumb-item>
  </el-breadcrumb>

  <div class = 'pageListBotton'>
    <el-button style="color: white;background: #CA1C1B;padding:20px 40px" :prefix-icon="Avatar"  @click="pageList">
      <template #prefix>
        <el-icon :size="18" class="el-input__icon">
          <Avatar />
        </el-icon>
      </template>
      档案列表
    </el-button>
    <span class="onBtnRight"  @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
  </div>
  <div style="width:80%;text-align:center;margin-left: 10%;margin-top: 50px">
    <div style="width: 33%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
            <div class="page_provider_title">搜索报告</div>
          <el-config-provider :locale="zhCn">
            <el-date-picker v-model="Year" type="year" placeholder="请选择年份"></el-date-picker>
          </el-config-provider>
          <el-button style="background-color:#CA1A1B;color:white" @click="onDefault(1)">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="myChart1" :style="{width: '33%', height: '550px', float: 'left'}"></div>
    <div id="myChart2" :style="{width: '33%', height: '550px', float: 'left'}"></div>
    <div id="myChart3" :style="{width: '33%', height: '550px', float: 'left'}"></div>
    <div id="myChart4" :style="{width: '100%', height: '550px', float: 'left','margin-top':'100px'}"></div>
    <div id="myChart5" :style="{width: '100%', height: '550px', float: 'left','margin-top':'100px'}"></div>
  </div>

</template>

<script setup>
import {defineComponent, onMounted, ref, watch} from 'vue';
import * as echarts from 'echarts'
import Header from './common/Header.vue';
import DrawerTwo from './common/DrawerTwo.vue';
import http, {baseUrl} from "../utils/http";
import zhCn from'element-plus/lib/locale/lang/zh-cn'
import {ElMessage} from "element-plus";
import  * as api from "../api/loginHttp.js";
import {useRoute, useRouter} from "vue-router"
const router = useRouter()
const route = useRoute()
const myChart = ref()
const myChart1 = ref()
const myChart2 = ref()
const groupId = ref()
const id = ref()
const reportId = ref()
const labName = ref()
const Year = ref()
const YearNew = ref()
const birth = ref([]);
onMounted(() => {
  if (route.params.groupId) {
    groupId.value = route.params.groupId
    id.value = route.params.id
    reportId.value = route.params.reportId
    YearNew.value = $getNewYear()
    if (groupId.value == 3) {
      labName.value = '婴幼儿营养测评'
    } else if (groupId.value == 5) {
      labName.value = '孕产妇营养测评'
    } else if (groupId.value == 6) {
      labName.value = '成年人营养测评'
    } else if (groupId.value == 7) {
      labName.value = '慢性病营养测评'
    } else if (groupId.value == 8) {
      labName.value = '团体营养测评'
    }
  }

  onDefault()
})

const onHome = async () => {
  await router.push({'path': '/Home'})
}

const onDefault = async (type = 0) => {
  let params = {
    'group_id': groupId.value,
  }
  // if(Year.value == undefined) {
  //   ElMessage.error('请输入年份再查询数据')
  //   return false;
  // }

   if(type !== 0) {
     YearNew.value = $getYear(Year.value)
     params.year = YearNew.value
   }

  const res = await api.getChart(params);
  //这里，key拿到了，但是不对
  let one = res.data.data.one;
  let arrOne = [];
  let arrDataOne = [];
  for(let k in one){
    arrOne.push(k+'月')
    arrDataOne.push(one[k])
  }
  //
  // arrData.push(one['01'])
  // arrData.push(one['02'])
  // arrData.push(one['03'])
  // arrData.push(one['04'])
  // arrData.push(one['05'])
  // arrData.push(one['06'])
  // arrData.push(one['07'])
  // arrData.push(one['08'])
  // arrData.push(one['09'])
  // arrData.push(one['10'])
  // arrData.push(one['11'])
  // arrData.push(one['12'])
  //
  //
  //
  // const dataAxisOneData = ref(['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']);
  const dataAxisOneData = ref(arrOne);
  const dataOne = ref(arrDataOne);
  let myChart = echarts.init(document.getElementById("myChart1"));
  myChart.value = myChart;
  myChart.setOption({
    title: {
      text: '按月统计报告总数（'+ YearNew.value +'年）',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: dataAxisOneData.value,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '报告总数',
        type: 'bar',
        barWidth: '60%',
        data: dataOne.value
      }
    ]
  });

  let two = res.data.data.two;
  let arrTwo = [];
  let arrDataTwo = [];
  for(let k in two){
    arrTwo.push(k+'岁')
    arrDataTwo.push(two[k])
  }
  const dataAxisTwoData = ref(arrTwo);
  const dataTwo = ref(arrDataTwo);
  let myChart2 = echarts.init(document.getElementById("myChart2"));
  myChart2.value = myChart2;
  myChart2.setOption({
    title: {
      text: '按年龄统计报告（'+ YearNew.value +'年）',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: dataAxisTwoData.value,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        data: dataTwo.value
      }
    ]
  });

  let three = res.data.data.three;
  let arrThree = [];
  let arrDataThree = [];
  for(let k in three){
    arrThree.push(k)
    arrDataThree.push(three[k])
  }
  const dataAxisThreeData =  ref(arrThree);
  const dataThree =  ref(arrDataThree);
  const maxThree = ref(Math.max.apply(null, arrDataThree))
  let myChart3 = echarts.init(document.getElementById("myChart3"));
  myChart3.value = myChart3;
  myChart3.setOption({
    title: [
      {
        text: '统计Bmi分析指数汇总（'+ YearNew.value +'年）'
      }
    ],
    polar: {
      radius: [30, '80%']
    },
    radiusAxis: {
      max: maxThree.value
    },
    angleAxis: {
      type: 'category',
      data: dataAxisThreeData.value,
      startAngle: 75
    },
    tooltip: {},
    series: {
      type: 'bar',
      data: dataThree.value,
      coordinateSystem: 'polar',
      label: {
        show: true,
        position: 'middle',
        formatter: '{b}: {c}'
      }
    },
    backgroundColor: '#fff',
    animation: false
  });

  let four = res.data.data.four;
  let arrFour = [];
  let arrDataFour = [];
  for(let k in four){
    arrFour.push(k)
    arrDataFour.push(four[k])
  }
  let myChart4 = echarts.init(document.getElementById("myChart4"));
  myChart4.value = myChart4;
  const axisDataFour = ref(arrFour);
  const dataFour = ref(arrDataFour);
  const linksFour = dataFour.value.map(function (item, i) {
    return {
      source: i,
      target: i + 1
    };
  });
  myChart4.setOption({
    title: {
      text: '食物过敏类统计（'+ YearNew.value +'年）'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: axisDataFour.value
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        symbolSize: 40,
        label: {
          show: true
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        data: dataFour.value,
        links: linksFour,
        lineStyle: {
          color: '#2f4554'
        }
      }
    ]
  })

  let five = res.data.data.five;
  let arrFive = [];
  let arrDataFive = [];
  let series = [];
  let series1 = [];
  let series2 = [];
  let series3 = [];
  let series4 = [];
  let series5 = [];
  let series6 = [];
  let series7 = [];
  let series8 = [];
  let series9 = [];
  let series10 = [];
  let series11 = [];
  let series12 = [];
  let seriesAll = [];
  console.log(five);
  for(let k in five){
    arrFive.push(k)
    series.push(five[k])
  }
  for(let k in series){
    series1.push(series[k][1]);
    series2.push(series[k][2]);
    series3.push(series[k][3]);
    series4.push(series[k][4]);
    series5.push(series[k][5]);
    series6.push(series[k][6]);
    series7.push(series[k][7]);
    series8.push(series[k][8]);
    series9.push(series[k][9]);
    series10.push(series[k][10]);
    series11.push(series[k][11]);
    series12.push(series[k][12]);
  }
  const dataAxisFiveData = ref(arrFive);
  let myChart5 = echarts.init(document.getElementById("myChart5"));
  myChart5.value = myChart5;
  myChart5.setOption({
    title: [
      {
        text: '疾病汇总指数（'+YearNew.value+'年）'
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: dataAxisFiveData.value
    },
    series: [
      {
        name: '一月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data:series1
      },
      {
        name: '二月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series2
      },
      {
        name: '三月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series3
      },
      {
        name: '四月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series4
      },
      {
        name: '五月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series5
      },
      {
        name: '六月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series6
      },
      {
        name: '七月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series7
      },
      {
        name: '八月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series8
      },
      {
        name: '九月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series9
      },
      {
        name: '十月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series10
      },
      {
        name: '十一月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series11
      },
      {
        name: '十二月',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: series12
      }
    ]
  })
}

const pageList = async () => {
  await router.push({'path': '/pageList/' + groupId.value})
}
function $getYear(params) {
  var date = new Date(params);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y;
  return time;
}
function $getNewYear() {
  let date = new Date();
  let y = date.getFullYear();
  return y;
}
</script>

<style scoped>

</style>
